<template>
	<view class='login'>
		<view>
			<u-navbar :autoBack="true" bgColor='rgba(245,245,245,0.39)'></u-navbar>
		</view>
		<view class='login-main'>
			<view class='login-img'>
				<image src="../../static/logo.png" mode=""></image>
				<text>手机号登录</text>
			</view>
			<view class="login-text">首次登录手机号将在验证后生成新账号</view>
			<view v-if='isCheck'>
				<view class='login-phone'>
					<input type="tel" placeholder="请输入手机号" v-model='phone'>
				</view>
				<view class='login-code'>
					<button 
						@click='code' 
						:disabled="isBtn"
						:class='isBtn?"active":""'
					>发送短信验证码</button>
				</view>
			</view>
			<view v-else>
				<view class='login-user'>
					<input type="text" placeholder="用户名" v-model='user.name'>
				</view>
				<view class='login-user'>
					<input type="password" placeholder="密码" v-model='user.pwd'>
				</view>
				<view class='login-code'>
					<button @click='login'>登录</button>
				</view>
			</view>
			<view class='login-pwd' @click='loginUser'>
				{{ isCheck ? '用户名和密码登录' : '手机号登录'}}
			</view>
			<view class='login-msg'>
				<u-checkbox-group  @change='checkBtn'>
					<u-checkbox shape="circle"></u-checkbox>
					<view class='msg-text'>
						我已阅读并同意 <text>服务条款</text> 和 <text>隐私政策</text>
					</view>
				</u-checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
import { loginByJson } from '../../api/login.js'
import { Encrypt } from '../../utils/aes.js'
import { mapMutations } from 'vuex'
export default{
	data () {
		return {
			phone:'',
			isBtn:true,
			check:0,
			isCheck:true,
			user:{
				name:'',
				pwd:''
			}
		}
	},
	methods:{
		...mapMutations(['setToken']),
		code(){
			if( this.check ){
				uni.navigateTo({
					url:`/pages/login/code?tel=${this.phone}`
				})
			}else{
				uni.showToast({
					title:'请查看服务条款和隐私协议',
					icon:'error'
				})
			}
		},
		checkBtn( e ){
			this.check = e.length;
		},
		loginUser(){
			this.isCheck = !this.isCheck;
		},
		login(){
			loginByJson({
				username:Encrypt(this.user.name),
				password:Encrypt(this.user.pwd)
			}).then(res=>{
				uni.showToast({
					title:'登录成功',
					icon:'success',
				})
				//设置token
				this.setToken( res.accessToken );
				//返回我的页面
				uni.switchTab({
					url:'/pages/tabs/me'
				})
			})
		}
	},
	watch:{
		phone( newVal,oldVal ){
			let reg = /^1[23456789]\d{9}$/;
			this.isBtn = !reg.test( newVal );
		}
	}
}
</script>

<style>
.login{
	display: flex;
	align-items: center;
	width: 100vw;
	height: 100vh;
	background: rgba(245,245,245,0.39);
}
.login-main{
	flex:1;
	margin:0 58rpx;
}
.login-img{
	display: flex;
	align-items: center;
}
.login-img image{
	width: 83rpx;
	height: 83rpx;
}
.login-img text{
	padding-left: 22rpx;
	font-size: 56rpx;
	font-weight: bold;
	color: #343234;
}
.login-text{
	padding-top:45rpx;
	font-size: 28rpx;
	font-weight: 400;
	color: #343234;
	letter-spacing: 2rpx;
	opacity: 0.53;
}
.login-phone{
	padding-top:121rpx;
	padding-bottom:31rpx;
	border-bottom:2rpx solid #707070;
}
.login-user{
	padding:24rpx 0;
	border-bottom:2rpx solid #707070;
}
.login-code{
	padding-top:88rpx;
}
.login-code button{
	width: 100%;
	line-height: 100rpx;
	font-size: 33rpx;
	font-weight: bold;
	color: #FFFFFF;
	letter-spacing: 8rpx;
	opacity: 1;
	background-color:#337AFF;
}
.login-code button.active{
	background-color: #ccc;
}
.login-pwd{
	display: flex;
	justify-content: flex-end;
	padding-top:18rpx;
	font-size: 28rpx;
	font-weight: 400;
	color: #343234;
	letter-spacing: 2rpx;
}
.login-msg{
	padding-top:38rpx;
}
/deep/ .u-checkbox-group{
	justify-content: center;
	align-items: center;
}
.msg-text{
	font-size: 24rpx;
	font-weight: 400;
	color: #343234;
	letter-spacing: 2rpx;
}
.msg-text text{
	color:#0077FF;
}
</style>